<template>
  <div class="all">

    <div class="byd">
      <!-- 标题 -->
      <div class="title" style="width:500px;height:70px;">
        <dv-border-box-9>
          <h4>比亚迪宋PLUS DM-i</h4>
          <dv-decoration-5 style="width:400px;height:20px;"/>
        </dv-border-box-9>
      </div>

      <!-- 车型介绍 -->
      <dv-scroll-board :config="bydmodels" style="width:500px;height:220px" />

      <dv-border-box-3 style="width:510px;height:300px;margin-top: 8px;">
        <p style="color:orange; text-align: center;padding-top: 25px;">销量变化</p>
        <dv-conical-column-chart :config="bydsale" style="width:400px;height:200px;margin:auto;" />
      </dv-border-box-3>

      <!-- 图1 -->
      <div class="one" style="width:500px;height:460px;">
        <dv-border-box-8>
          <Bydpie class="bydpie"></Bydpie>
        </dv-border-box-8>
      </div>

      <!-- 图2 -->
      <div class="two" style="width:500px;height:400px;">
        <dv-border-box-8 :reverse="true">
          <Bydrad class="bydrad"></Bydrad>
        </dv-border-box-8>
      </div>

      <!-- 图3 -->
      <div class="three" style="width:500px;height:400px;">
        <dv-border-box-10>
          <Bydhis1 class="bydhis1"></Bydhis1>
        </dv-border-box-10>
      </div>

      

    </div>

    <!-- 中间部分 -->
    <div class="center">

      <div class="ins">
        <table style="width:870px;height:100px;">
          <tr style="background-color: #0dbff5;">
            <th>数据对象</th>
            <th>数据大小</th>
            <th>数据来源</th>
          </tr>
          <tr style="background-color:hsl(180deg 78% 40%)">
            <td>比亚迪宋PLUS DM-i</td>
            <td>2283条</td>
            <td>懂车帝</td>
          </tr>
          <tr style="background-color: hsl(180deg 78% 40%)">
            <td>特斯拉Model Y</td>
            <td>819条</td>
            <td>懂车帝</td>
          </tr>
        </table>
      </div>

      

      <!-- 图一 -->
      <div style="width:870px;height:550px;">
        <dv-border-box-11 title="比亚迪宋PLUS DM-i">
          <Bydmap class="bydmap"></Bydmap>
        </dv-border-box-11>
      </div>

      <!-- 图二 -->
      <dv-border-box-12 style="height:315px;" class="t5combox">
        <h3 style="color:orange;text-align: center;padding-top: 25px;">前5综合评分情况</h3>
        <div style="width:250px;height:250px" class="left">
          <p style="color:orange;text-align: center">比亚迪宋PLUS</p>
          <dv-active-ring-chart :config="bydt5com" style="width:250px;height:250px" />
        </div>
        <div style="width:250px;height:250px" class="right">
          <p style="color:orange;text-align: center">特斯拉Model</p>
          <dv-active-ring-chart :config="tslt5com" style="width:250px;height:250px" />
        </div>
      </dv-border-box-12>

      

      <!-- 图三 -->
      <dv-border-box-13 style="width:870px;height:370px;" class="modelt3box"> 
        <h3>TOP3热销车型</h3>
        <div class="left">
          <p>比亚迪宋PLUS DM-i</p>
          <dv-scroll-ranking-board :config="bydmodelt3" style="width:400px;height:200px" />
        </div>      
                        
        <div class="right">
          <p>特斯拉Model Y</p>
          <dv-scroll-ranking-board :config="tslmodelt3" style="width:400px;height:200px" />
        </div>       
      </dv-border-box-13>

      <!-- 图四 -->
      <div style="width:870px;height:550px;">
        <dv-border-box-11 title="特斯拉Model Y">
          <Tslmap class="tslmap"></Tslmap>
        </dv-border-box-11>
      </div>

    </div>

    <div class="tsl">
      <!-- 标题 -->
      <div class="title" style="width:500px;height:70px;">
        <dv-border-box-9>
          <h4>特斯拉Model Y</h4>
          <dv-decoration-5 style="width:400px;height:20px;"/>
        </dv-border-box-9>
      </div>

      <!-- 车型介绍 -->
      <dv-scroll-board :config="tslmodels" style="width:500px;height:220px" />

      <dv-border-box-3 style="width:510px;height:300px;margin-top: 8px;">
        <p style="color:orange; text-align: center;padding-top: 25px;">销量变化</p>
        <dv-conical-column-chart :config="tslsale" style="width:400px;height:200px;margin:auto;" />
      </dv-border-box-3>

      <!-- 图1 -->
      <div class="one" style="width:500px;height:460px;">
        <dv-border-box-8>
          <Tslpie class="tslpie"></Tslpie>
        </dv-border-box-8>
      </div>

      <!-- 图2 -->
      <div class="two" style="width:500px;height:400px;">
        <dv-border-box-8 :reverse="true">
          <Tslrad class="tslrad"></Tslrad>
        </dv-border-box-8>
      </div>

      <!-- 图3 -->
      <div class="three" style="width:500px;height:400px;">
        <dv-border-box-10>
          <Tslhis1 class="tslhis1"></Tslhis1>
        </dv-border-box-10>
      </div>
      
    </div>

    

  </div>
</template>

<script>
import Bydpie from '@/components/All/com/Bydpie.vue'
import Tslpie from '@/components/All/com/Tslpie.vue'
import Bydrad from '@/components/All/key/Bydrad.vue'
import Tslrad from '@/components/All/key/Tslrad.vue'
import Bydhis1 from '@/components/All/loc/Bydhis1.vue'
import Tslhis1 from '@/components/All/loc/Tslhis1.vue'
import Bydmap from '@/components/All/map/Bydmap.vue'
import Tslmap from '@/components/All/map/Tslmap.vue'

export default {
  components: {
    Bydpie,
    Tslpie,
    Bydrad,
    Tslrad,
    Bydhis1,
    Tslhis1,
    Bydmap,
    Tslmap,
  },
  data() {
    return {
      bydmodels: {
        header: ['车型'],
        data: [
          ['<span style="color:#37a2da;">2021款DM-i 110KM 两驱旗舰 PLUS</span>'],
          ['<span style="color:#37a2da;">2021款DM-i 110KM 两驱旗舰型</span>'],
          ['<span style="color:#37a2da;">2021款DM-i 51KM 两驱尊荣型</span>'],
          ['<span style="color:#37a2da;">2021款DM-i 100KM 四驱旗舰 PLUS</span>'],
          ['<span style="color:#37a2da;">2021款DM-i 110KM 两驱旗舰 PLUS 5G版</span>'],
          ['<span style="color:#37a2da;">2021款DM-i 51KM 两驱尊贵型</span>'],
          ['<span style="color:#37a2da;">2021款DM-i 100KM 四驱旗舰 PLUS 5G版</span>'],
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      },
      tslmodels: {
        header: ['车型'],
        data: [
          ['<span style="color:#37a2da;">2021款标准续航后轮驱动版</span>'],
          ['<span style="color:#37a2da;">2022款后轮驱动版</span>'],
          ['<span style="color:#37a2da;">2022款改款 后轮驱动版</span>'],
          ['<span style="color:#37a2da;">2021款长续航全轮驱动版</span>'],
          ['<span style="color:#37a2da;">2022款长续航全轮驱动版</span>'],
          ['<span style="color:#37a2da;">2021款Performance 高性能全轮驱动版</span>'],
          ['<span style="color:#37a2da;">2022款改款 长续航全轮驱动版</span>'],
          ['<span style="color:#37a2da;">2021款长续航全轮驱动版 3D3/3D7</span>'],
          ['<span style="color:#37a2da;">2022款Performance 高性能全轮驱动版</span>'],
          ['<span style="color:#37a2da;">2021款长续航全轮驱动版 3D3/3D5</span>'],
          ['<span style="color:#37a2da;">2021款改款 长续航全轮驱动版</span>'],
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      },
      bydmodelt3: {
        data: [
          {
            name: '2021款DM-i 110KM 两驱旗舰 PLUS',
            value: 1377
          },
          {
            name: '2021款DM-i 110KM 两驱旗舰型',
            value: 361
          },
          {
            name: '2021款DM-i 51KM 两驱尊荣型',
            value: 359
          },
        ]
      },
      tslmodelt3: {
        data: [
          {
            name: '2021款标准续航后轮驱动版',
            value: 286
          },
          {
            name: '2022款后轮驱动版',
            value: 201
          },
          {
            name: '2022款改款 后轮驱动版',
            value: 108
          },
        ]
      },
      bydsale: {
        data: [
          {
            name: '2021年',
            value: 842
          },
          {
            name: '2022年',
            value: 1337
          },
          {
            name: '2023年',
            value: 104
          },
        ],
        showValue: true
      },
      tslsale: {
        data: [
          {
            name: '2021年',
            value: 396
          },
          {
            name: '2022年',
            value: 362
          },
          {
            name: '2023年',
            value: 61
          },
        ],
        showValue: true
      },
      bydt5com: {
        data: [
          {
            name: '4.14分',
            value: 161
          },
          {
            name: '4.00分',
            value: 154
          },
          {
            name: '4.50分',
            value: 140
          },
          {
            name: '4.36分',
            value: 138
          },
          {
            name: '4.57分',
            value: 135
          }
        ]
      },
      tslt5com: {
         data: [
          {
            name: '4.50分',
            value: 56
          },
          {
            name: '4.07分',
            value: 53
          },
          {
            name: '4.57分',
            value: 50
          },
          {
            name: '4.21分',
            value: 49
          },
          {
            name: '4.71分',
            value: 48
          }
        ]
      }
    }
  },
}
</script>

<style lang="less" scoped>
body {
  position: relative;
}
.center {
  position: absolute;
  top: -10px;
  left: 510px;
  // border: 1px solid #f1e8e8;
  width: 870px;
  height: 900px;
  .ins {
    margin-top: 10px;
    table {
      border: 0;
      border-collapse: collapse;
      margin-bottom: 10px;
    }
    th {
      color: orange;
      font-weight: bold;
      width: 290px;
      height: 40px;
      text-align-last: left;
      padding-left: 40px;
      
    }
    td {
      color: rgb(243, 229, 229);
      padding-left: 40px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid white;
    }
  }
  .bydmap ,.tslmap{
    margin: auto;
    padding-top: 50px;
    
  }
  .modelt3box {
    position: relative;
    h3 {
      color: orange;
      text-align: center;
      padding-top: 30px;
    }
    div p {
      color: white;
      padding-bottom: 20px;
      text-align: center;
    }
    .left {
      position: absolute;
      top: 85px;
      left: 20px;
    }
    .right {
      position: absolute;
      top: 85px;
      right: 20px;
    }
  }
  .t5combox {
    position: relative;
    .left {
      position: absolute;
      left: 100px;
    }
    .right {
      position: absolute;
      right: 100px;
    }
  }
}
.tsl {
  position: absolute;
  top: 0;
  left: 1390px;
}
// 标题
.title {
  h4 {
    color: white;
    text-align: center;
    padding-top: 20px;
  }
  .dv-decoration-5  {
    margin: auto;
  }
}
// 车型
.dv-scroll-board {
  margin-top: 10px;
}
// 图
.one,.two,.three {
  margin-top: 8px;
  margin-left: 3px;
  .bydpie,.tslpie,.bydrad,.tslrad,.bydhis1,.tslhis1{
    margin: auto;
    padding-top: 25px;
    // background-color: rgb(14, 75, 75);
  }
}
</style>